<template>
  <div class="con-container" @contextmenu.prevent="disableContextMenu">
    <div
      class="top-title top-bar is-flex"
      :class="{ 'top-title-height': isWechat }"
    >
      <div class="left-part">
        <div class="logo">
          <img src="../../assets/images/u19.png" alt="" />
        </div>
        <div class="system-name" :class="{ nameWith: isWechat }">
          {{ systemName }}
        </div>
      </div>
      <div class="right-part" :class="{ 'flex-end': isWechat }">
        <div class="message-info text-right">
          <div>
            <span class="school-name">{{ formData.schoolName }} </span>
            <span class="stu-name">{{ formData.stuName }}</span>
          </div>
          <div class="exam-time">
            <i class="iconfont icon-time text-primary"></i>剩余时间：{{ timer }}
          </div>
        </div>
        <div>
          <el-button class="big-btn" type="danger" @click="comfirmExam" round
            >提交答卷</el-button
          >
        </div>
      </div>
    </div>

    <main class="center-box" :class="{ weChatHeight: isWechat }">
      <div class="main-inside is-flex" :class="{ mainHeight: isWechat }">
        <div
          type="primary"
          class="drawer-btn"
          v-if="isWechat"
          @click="drawer = true"
        >
          答题卡
        </div>
        <el-drawer v-model="drawer" size="70%" direction="btt">
          <div class="card-title">
            答题卡(<text class="card-num" type="primary">{{ count }}</text
            >/{{ exercises.length }} )
          </div>

          <div class="answer-sheet">
            <div v-for="(item, key, index) in remakeExe" class="answer-box">
              <view
                class="choiceTitle"
                v-if="key == 'singleChoice' && randomSingleLength != 0"
              >
                （{{ serialList[index] }}）单选题</view
              >
              <view
                class="choiceTitle"
                v-else-if="key == 'multipleChoice' && randomMultipleLength != 0"
              >
                （{{ serialList[index] }}）多选题</view
              >
              <view
                class="choiceTitle"
                v-else-if="key == 'tofChoice' && randomTofLength != 0"
              >
                （{{
                  randomMultipleLength == 0
                    ? serialList[index - 1]
                    : serialList[index]
                }}）判断题</view
              >

              <div
                class="choiceList"
                :class="{
                  addClass: answerArrs[index],
                  current: current == index,
                }"
                v-if="key == 'singleChoice'"
                v-for="(childitem, index) in item"
                :key="childitem.id"
                @click="selectAnswer(index)"
              >
                {{ index + 1 }}
              </div>
              <div
                class="choiceList"
                :class="{
                  addClass: answerArrs[randomSingleLength + index],
                  current: current == randomSingleLength + index,
                }"
                v-else-if="key == 'multipleChoice'"
                v-for="(childitem, index) in item"
                :key="childitem.id"
                @click="selectAnswer(randomSingleLength + index)"
              >
                {{ randomSingleLength + index + 1 }}
              </div>
              <div
                class="choiceList"
                :class="{
                  addClass:
                    answerArrs[
                      randomSingleLength + randomMultipleLength + index
                    ],
                  current:
                    current ==
                    randomSingleLength + randomMultipleLength + index,
                }"
                v-else="key == 'tofChoice'"
                v-for="(childitem, index) in item"
                :key="childitem.id"
                @click="
                  selectAnswer(
                    randomSingleLength + randomMultipleLength + index
                  )
                "
              >
                {{ randomSingleLength + randomMultipleLength + index + 1 }}
              </div>
            </div>
          </div>
        </el-drawer>
        <div class="detail-bottom is-flex">
          <div
            class="right-part right-con"
            :class="{ isWechat: isWechat }"
            ref="rightPart"
          >
            <div class="card-title">
              答题卡(<text class="card-num" type="primary">{{ count }}</text
              >/{{ exercises.length }} )
            </div>

            <div class="answer-sheet">
              <div v-for="(item, key, index) in remakeExe" class="answer-box">
                <view
                  class="choiceTitle"
                  v-if="key == 'singleChoice' && randomSingleLength != 0"
                >
                  （{{ serialList[index] }}）单选题</view
                >
                <view
                  class="choiceTitle"
                  v-else-if="
                    key == 'multipleChoice' && randomMultipleLength != 0
                  "
                >
                  （{{ serialList[index] }}）多选题</view
                >
                <view
                  class="choiceTitle"
                  v-else-if="key == 'tofChoice' && randomTofLength != 0"
                >
                  （{{
                    randomMultipleLength == 0
                      ? serialList[index - 1]
                      : serialList[index]
                  }}）判断题</view
                >

                <div
                  class="choiceList"
                  :class="{
                    addClass: answerArrs[index],
                    current: current == index,
                  }"
                  v-if="key == 'singleChoice'"
                  v-for="(childitem, index) in item"
                  :key="childitem.id"
                  @click="selectAnswer(index)"
                >
                  {{ index + 1 }}
                </div>
                <div
                  class="choiceList"
                  :class="{
                    addClass: answerArrs[randomSingleLength + index],
                    current: current == randomSingleLength + index,
                  }"
                  v-else-if="key == 'multipleChoice'"
                  v-for="(childitem, index) in item"
                  :key="childitem.id"
                  @click="selectAnswer(randomSingleLength + index)"
                >
                  {{ randomSingleLength + index + 1 }}
                </div>
                <div
                  class="choiceList"
                  :class="{
                    addClass:
                      answerArrs[
                        randomSingleLength + randomMultipleLength + index
                      ],
                    current:
                      current ==
                      randomSingleLength + randomMultipleLength + index,
                  }"
                  v-else="key == 'tofChoice'"
                  v-for="(childitem, index) in item"
                  :key="childitem.id"
                  @click="
                    selectAnswer(
                      randomSingleLength + randomMultipleLength + index
                    )
                  "
                >
                  {{ randomSingleLength + randomMultipleLength + index + 1 }}
                </div>
              </div>
            </div>
          </div>
          <div class="left-part" ref="leftPart">
            <div
              class="exc-list"
              v-for="(exercise, index) in exercises"
              :key="index"
            >
              <div v-show="num + 1 == index + 1">
                <div class="paper-title" ref="pagerTop">
                  <text>{{ index + 1 }}、</text>
                  <text class="tag green-tag" v-if="exercise.questionType == 1"
                    >(单选题)</text
                  >
                  <text class="tag blue-tag" v-if="exercise.questionType == 2"
                    >(多选题)</text
                  >
                  <text class="tag orange-tag" v-if="exercise.questionType == 3"
                    >(判断题)</text
                  >
                  {{ exercise.questionContent }}
                </div>
                <div class="answer-list border-b">
                  <div class="examImg" v-if="exercise.questionPhoto != ''">
                    <img :src="exercise.questionPhoto" alt="" />
                  </div>
                  <div class="quest-box" ref="selectOption">
                    <div
                      class="quest"
                      v-for="(option, optionIndex) in exercise.options"
                      :key="option.optionCode"
                      :class="[
                        {
                          addClass: option.isSelected,
                          'wrong-select': option.wrong,
                          'right-select': option.right,
                        },
                      ]"
                      @click="
                        questSelect(
                          index,
                          option.optionCode,
                          optionIndex,
                          exercise.questionType,
                          exercise.id
                        )
                      "
                    >
                      <text class="selectStyle">{{
                        String.fromCharCode(65 + optionIndex)
                      }}</text>
                      {{ option.optionContent }}
                    </div>
                  </div>

                  <div class="option-box">
                    <el-button
                      type="primary"
                      @click="preQuest()"
                      v-show="num != 0"
                      >上一题</el-button
                    >
                    <el-button
                      type="primary"
                      @click="nextQuest()"
                      v-show="num < exercises.length - 1"
                      >下一题</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  nextTick,
  onUnmounted,
  computed,
  onBeforeUnmount,
  watch,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/utils/request";
import router from "@/router";
import { getData } from "./data";

let examName = ref("");
let duration = ref("");
const { proxy } = getCurrentInstance();

// let token = proxy.$CommonApi.getToken()
const { $bus } = getCurrentInstance().appContext.config.globalProperties;

//弹出窗样式
let isWechat = ref(false);
let drawer = ref(false);

//题目
let exercises = ref([]);
let selectedQuest = reactive([]);
let pagerTop = ref(null);
//存放答案
let answerArrs = reactive([]);
let idArrs = reactive([]);
let sortingArrs = reactive([]);
let current = ref(0);
//倒计时
let intervalId = null;
let count = ref(0);
let targetTime = ref();
let timer = ref();
//答题数量
let exercisesCount = ref(0);
let responseArrs = ref([]);
//系统名称
let systemName = ref();
//比赛ID
let matchID = ref();

//学生信息
let formData = reactive({
  id: "",
  schoolName: "",
  stuIdCard: "",
  stuName: "",
  teamNumber: "",
  matchId: "",
});

//系统名称
systemName.value = sessionStorage.getItem("systemName");

//选择题编号
let codeList = {
  A: 1,
  B: 2,
  C: 3,
  D: 4,
  E: 5,
  F: 6,
  G: 7,
};

//中文排序
let serialList = ["一", "二", "三", "四"];

//存放重新排序的试题
let remakeExe = ref({
  singleChoice: [],
  multipleChoice: [],
  tofChoice: [],
});
//答案长度
let randomSingleLength = ref();
let randomMultipleLength = ref();
let randomTofLength = ref();

//数组随机方法
function shuffleArray(array) {
  console.log("测试", array);
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

//获取本地试题
// async function getExamQuest() {
// return await getData();
// }
//获取试题
function getExamQuest() {
  return request({
    url: "/examApi/exam/start",
    method: "get",
  });
}

//考试id
let examId = "";
//获取考试
const getQuestions = () => {
  //获取考试题
  getExamQuest().then((res) => {
    let { questions, id, timeLong } = res.data;
    duration.value = timeLong;
    // duration.value = 100
    console.log("考试时间", timeLong, duration.value);
    examId = id;

    questions.forEach((item, index) => {
      if (item.options?.length) {
        item.options = shuffleArray(item.options);
      }
      if (item.questionType == 1) {
        // Single Choice单选题
        remakeExe.value.singleChoice.push(item);
      } else if (item.questionType == 2) {
        //Multiple choice多选题
        remakeExe.value.multipleChoice.push(item);
      } else {
        //true or false判断题
        remakeExe.value.tofChoice.push(item);
      }
    });

    //随机
    for (let item in remakeExe.value) {
      remakeExe.value[item] = shuffleArray(remakeExe.value[item]);
    }

    //获取不同类型数组的长度
    randomSingleLength.value = remakeExe.value.singleChoice.length;
    randomMultipleLength.value = remakeExe.value.multipleChoice.length;
    randomTofLength.value = remakeExe.value.tofChoice.length;

    //赋值
    exercises.value = [
      ...remakeExe.value.singleChoice,
      ...remakeExe.value.multipleChoice,
      ...remakeExe.value.tofChoice,
    ];

    //开始倒计时
    //时间倒数duration
    // 设置目标时间（这里以10分钟为例）
    targetTime.value = new Date().getTime() + duration.value * 60 * 1000 + 2000; // 当前时间 + x分钟
    timer.value = ref("00:00");
    intervalId = setInterval(updateCountdown, 1000);
  });
};
getQuestions();

// 更新倒计时函数
function updateCountdown() {
  const currentTime = new Date().getTime();
  const timeLeft = targetTime.value - currentTime;

  if (timeLeft >= 0) {
    const minutes = Math.floor(timeLeft / 1000 / 60);
    const seconds = Math.floor((timeLeft / 1000) % 60);
    // 格式化显示
    timer.value =
      (minutes < 10 ? "0" : "") +
      minutes +
      ":" +
      (seconds < 10 ? "0" : "") +
      seconds;
  } else {
    clearInterval(intervalId);
    //考试结束之后
    if (answerArrs != "") {
      postExam().then((res) => {
        ElMessage({
          message: "考试时间结束，提交成功！",
          type: "success",
        });
        setTimeout(() => {
          router.replace({
            path: `/elogin`,
            query: {
              matchID: formData.matchId,
            },
          });
        }, 1000);
      });
    } else {
      ElMessage({
        message: "未进行作答，考试结束！",
        type: "warning",
      });
      setTimeout(() => {
        router.replace({
          path: `/elogin`,
          query: {
            matchID: formData.matchId,
          },
        });
      }, 1000);
    }

    timer.value = "00:00";
  }
}

//提交答案
function postExamQuest(data) {
  return request({
    url: "/examApi/exam/submit",
    method: "post",
    data,
  });
}

let examData = ref([]);
// 定义比较函数
function compare(property) {
  return function (a, b) {
    var value1 = a[property];
    var value2 = b[property];
    return value1 - value2; // 升序排序
  };
}
//提交考试
const postExam = async () => {
  let exercisesLength = exercises.value.length;
  console.log("长度", exercises.value.length);
  for (let j = 0; j < exercisesLength; j++) {
    let answerObj = {};
    if (answerArrs[j]) {
      answerObj.answer = answerArrs[j];
      examData.value[j] = answerObj;
    } else {
      answerObj.answer = "";
      examData.value[j] = answerObj;
    }
    examData.value[j].sorting = j + 1;
    examData.value[j].id = exercises.value[j].id;
  }

  let data = {
    id: examId,
    answers: examData.value,
  };
  console.log("aaaaa", data);
  postExamQuest(data).then((res) => {
    //清除定时器
    clearInterval(intervalId);
  });
};

//提交试卷
const comfirmExam = () => {
  ElMessageBox.confirm("确定要交卷?", "提醒", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (answerArrs != "") {
        await postExam();
        ElMessage({
          type: "success",
          message: "提交成功",
        });
        setTimeout(() => {
          router.replace({
            path: `/elogin`,
            query: {
              matchID: formData.matchId,
            },
          });
        }, 1000);
      } else {
        ElMessage({
          type: "warning",
          message: "答案不能为空",
        });
      }
    })
    .catch(() => {});
};

let num = ref(0);
//下一题
const nextQuest = () => {
  if (num.value < exercises.value.length - 1) {
    num.value++;
    current.value++;
  }
};
//上一题
const preQuest = () => {
  if (num.value > 0) {
    num.value--;
    current.value--;
  }
};

//选择题目
const selectAnswer = (index) => {
  current.value = index;
  num.value = index;
};

//选择存放答案
const getElement = (index, selectType, optionCode, type, id) => {
  let str = "";
  if (type == 2) {
    selectType.forEach((element) => {
      if (element.isSelected) {
        str += element.optionCode;
      }
    });
  } else {
    selectType.forEach((element) => {
      if (element.isSelected) {
        str = element.optionCode;
      }
    });
  }
  answerArrs[index] = str;
  idArrs[index] = id;
  sortingArrs[index] = index + 1;
};

//选择答案时，样式改变状态
const questSelect = (index, optionCode, optionIndex, type, execricesId) => {
  console.log(index, optionCode, optionIndex, type, execricesId);
  let selectType = exercises.value[index].options;

  //多选
  if (type == 2) {
    if (selectType[optionIndex].isSelected == undefined) {
      selectType[optionIndex].isSelected = true;
      getElement(index, selectType, optionCode, type, execricesId);
    } else {
      selectType[optionIndex].isSelected = !selectType[optionIndex].isSelected;
      getElement(index, selectType, optionCode, type, execricesId);
    }
  } else {
    selectType[optionIndex].isSelected = true;
    selectType.forEach((option, indx) => {
      if (optionIndex != indx) {
        option.isSelected = false;
      }
    });
    getElement(index, selectType, optionCode, type, execricesId);
  }

  //计算长度
  let checkNum = 0;
  answerArrs.forEach((item, index) => {
    if (item != "") {
      checkNum += 1;
    }
    count.value = checkNum;
  });
};

//提交题目数据
const updataQuest = (answer, id) => {
  console.log(id, answer);
  let params = {
    token,
    id,
    answer,
  };
  proxy.$RequestApi.updataQuest(params).then((res) => {
    if (res.data.code == "0X00000") {
      console.log(res.data);
    }
  });
};

//验证答案
const checkAnswer = (index, id) => {
  let liteAnswer = exercises.value[index];
  if (liteAnswer.answer != "") {
    let newAnswersArr = ["", "", "", "", "", ""];
    let answers = liteAnswer.answer.split("");
    answers.forEach((arrItem) => {
      //根据编号把答案放进数组
      newAnswersArr[codeList[arrItem] - 1] = arrItem;
      //获取编号
      let optionIndex = codeList[arrItem] - 1;
      //获取编号对应的选项数据
      let optionSelect = liteAnswer.options[optionIndex];
      if (optionSelect.right == undefined) {
        optionSelect.right = true;
      }
    });
  }
  if (answerArrs[index] != "") {
    let newResponsesArr = ["", "", "", "", "", ""];
    let responses = answerArrs[index];

    responses.split("").forEach((arrItem) => {
      newResponsesArr[codeList[arrItem] - 1] = arrItem;
      let optionIndex = codeList[arrItem] - 1;
      let optionSelect = liteAnswer.options[optionIndex];
      if (!optionSelect.right) {
        optionSelect.wrong = true;
      }
    });
  }

  liteAnswer.disable = true;

  if (id) {
    updataQuest(answerArrs[index], id);
    liteAnswer.lastAnswer = answerArrs[index];
    exercisesCount.value++;
  }
};

//禁用前进后退
const disableBackForward = () => {
  const handlePopstate = () => {
    window.history.forward(); // 清除前进的历史记录
  };

  window.addEventListener("popstate", handlePopstate);

  // 返回一个函数，在组件卸载时移除事件监听
  return () => window.removeEventListener("popstate", handlePopstate);
};

// 禁用键盘事件
const func1 = () => {
  window.addEventListener(
    "keydown",
    function (e) {
      if (
        e.key === "F5" ||
        e.key === "F6" ||
        e.key === "F7" ||
        e.key === "F8" ||
        e.key === "F11" ||
        e.key === "F12"
      ) {
        e.preventDefault();
      }
      console.log("按键:", e.key, e.keyCode);
    },
    false
  );
};
func1();

//禁用右键
const disableContextMenu = (event) => {
  event.preventDefault();
};

// const isFullScreen = ref(false);

// const toggleFullScreen = () => {
// 	if (!document.fullscreenElement && !isFullScreen.value) {
// 		// 进入全屏
// 		document.documentElement.requestFullscreen()
// 		isFullScreen.value = true;

// 	} else {
// 		// 退出全屏
// 		if (document.exitFullscreen) {
// 			document.exitFullscreen()
// 			isFullScreen.value = false;

// 		}
// 	}
// };

// function handleBeforeUnload(event) {
// 	const message = '你确定要离开吗？';
// 	event.returnValue = message; // 标准的跨浏览器兼容性处理
// 	return message; // 为了某些浏览器的兼容性而返回信息
// }

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "你确定要离开吗？";
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;
});

onMounted(() => {
  //读取学生信息
  formData.id = sessionStorage.getItem("id");
  formData.schoolName = sessionStorage.getItem("schoolName");
  formData.stuIdCard = sessionStorage.getItem("stuIdCard");
  formData.stuName = sessionStorage.getItem("stuName");
  formData.teamNumber = sessionStorage.getItem("teamNumber");

  //考试Id
  formData.matchId = sessionStorage.getItem("matchId");
  // 挂载时禁用前进后退
  // window.history.pushState(null, document.title, window.location.pathname);
  window.addEventListener("popstate", disableBackForward());
  // window.addEventListener('beforeunload', handleBeforeUnload);

  const isWeixinBrowser = /micromessenger/i.test(navigator.userAgent);
  if (isWeixinBrowser) {
    // ElMessage('当前浏览器是微信浏览器')
    isWechat.value = true;
  } else {
    isWechat.value = false;
  }
});
//销毁时移除定时器
onUnmounted(() => {
  clearInterval(intervalId);
  // 组件卸载时移除事件监听
  window.removeEventListener("popstate", disableBackForward());

  // window.removeEventListener('beforeunload', handleBeforeUnload);
});

//退出切换拦截
// let isFirst = true
// window.onfocus = function() {
// 	isFirst = true
// };
// window.onblur = function(e) {
// 	if (isFirst) {
// 		isFirst = false;
// 	}
// 	var win = window.open('', '_self', '');
// 	win.close();
// };
</script>

<style lang="scss" scoped>
body,
html {
  background-color: #f8f8f8;
}

.top-title {
  height: 90px;
  padding: 0 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dcdcdc;
  border-left: 0;
  border-right: 0;
  background-color: rgb(36, 116, 243);

  .left-part {
    display: flex;
    flex-direction: row;
    flex: 1;

    .logo {
      display: flex;
      align-items: center;
      padding-right: 15px;

      img {
        width: 60px;
        height: 60px;
      }
    }

    .system-name {
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      width: 500px;
      display: flex;
      align-items: center;
    }

    .nameWith {
      width: auto;
    }
  }

  .right-part {
    display: flex;
    flex-direction: row;
    align-items: center;

    .school-name {
      margin-right: 20px;
    }

    .exam-time {
      width: 150px;
    }
  }

  .flex-end {
    align-self: flex-end;
  }

  .message-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 30px;

    div {
      color: #fff;
    }
  }

  .el-button--danger {
    background-color: #f93b3b !important;
  }
}

.top-title-height {
  height: auto;
  flex-direction: column;
  padding-top: 5px;
}

.exeStyle {
  width: 70% !important;
  margin: 10px auto 0;
  background-color: #fff;
  border-radius: 6px;
}

.is-flex {
  display: flex;
}

.con-container {
  width: 100%;
  height: calc(100%);
  background-color: #f8f8f8;
  overflow: hidden;
}

.center-box {
  width: 100%;
  height: calc(100% - 90px);
  justify-content: center;
  align-items: center;
}

.weChatHeight {
  height: calc(100% - 100px);
}

.main-inside {
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  height: 100%;

  .drawer-btn {
    background-color: #cfe8ff;
    width: 32px;
    height: 60px;
    padding: 0 10px;
    border-radius: 10px 0 0 10px;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .left-part {
    flex: 1;
    position: relative;
    background: #fff;
    padding-top: 15px;
    border: 1px solid #eee;
    border-radius: 6px;
  }

  .right-part {
    width: 350px;
    background-color: #fff;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-right: 10px;
  }

  .isWechat {
    display: none;
  }
}

.mainHeight {
  height: calc(100% - 20px);
}

.detail-bottom {
  width: 100%;
  padding: 10px;
}

.examImg {
  padding: 10px;
  text-align: center;
}

.examImg img {
  height: 200px;
}

.option-box {
  padding: 10px 150px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: #fff;
  width: auto;
  left: 0;
  bottom: 0;
  right: 0;

  button {
    width: 100px;
    border-radius: 6px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

// 试题内容样式
.paper-title {
  min-height: auto;
  font-size: 16px;
  margin-bottom: 12px;
  background: #fff;
  padding: 4px 26px;
}

.paper-title .el-text {
  font-size: 16px;
}

.answer-list .quest {
  font-size: 16px;
  margin: 0 0 20px 60px;
  cursor: pointer;
}

.answer-list .quest:last-child {
  margin-bottom: 0;
}

.answer-list {
  padding-bottom: 20px;
}

.answer-list .quest text {
  margin-right: 6px;
}

.process {
  position: absolute;
  bottom: 0;
  width: 260px;
  left: 20px;
  text-align: center;
  border-top: 1px dashed #ddd;
  line-height: 50px;
}

.process .text {
  font-size: 16px;
}

.answer-sheet {
  height: auto;
  overflow: auto;
  font-size: 14px;
}

// 答题卡的题型
.choiceTitle {
  display: block;
  width: 100%;
  clear: both;
  padding: 5px 0 5px;
  text-align: center; // 题型居中显示
  font-size: 14px;
  background-color: rgb(224 238 253 / 50%); //提醒底色
  color: #333;
  margin-bottom: 4px;
}

// 答题卡的题序
.answer-sheet > div > div {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50px;
  border: 1px solid #cddbe3;
  margin: 4px 0px 4px 8px;
  float: left;
  cursor: pointer;
  list-style: none;
  background-color: #fff;
}

.answer-box {
  overflow: hidden;
  margin-bottom: 4px;
}

.answer-sheet .current {
  background-color: #cfe8ff;
}

.answer-sheet div.addClass {
  background: #1890ff;
  color: #fff;
}

.right-con {
  // padding: 4px;
  // background-color: #f1f1f1;
}

.addClass text {
  background: #1890ff;
  color: #fff;
  /* border: 1px solid #1890ff; */
}

.selectStyle {
  display: inline-flex;
  width: 26px;
  height: 26px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: 1rpx solid #f1f1f1;
}

.border-b {
  border-bottom: 1px solid #f1f1f1;
}

.sumbit-btn {
  padding: 10px;
}

.font-size-16 {
  font-size: 16px;
}

.answer-info {
  padding: 10px 20px;
}

.answer-line > div:first-child {
  margin-right: 100px;
}

.collect {
  font-size: 14px;
  /* color: #f00; */
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  position: absolute;
  right: 20px;
}

.collect i {
  font-size: 20px;
  margin-left: 4px;
  color: #dcdcdc;
}

.collect i.active {
  color: #ffcc00;
}

.exe-title {
  /* margin-bottom: 10px; */
  font-size: 18px;
  padding: 10px;
}

.card-title {
  // background-color: #1890ff;
  // margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #d8e3f5;
}

.right-select text {
  background: #5fd0af;
  color: #fff;
}

.wrong-select text {
  background: #ff605d;
  color: #fff;
}

.right-fixed {
  position: fixed;
  top: 0;
  left: 1000px;
}

// 提交答卷按钮样式
.big-btn {
  // border-radius: 140rpx;
  // 改成圆角
  border-radius: 6px;
}

.answer-type {
  // padding: 10px;

  border-bottom: 1rpx dashed #f1f1f1;
}

.answer-type ul {
  display: flex;
  // padding: 0 10px;
}

.answer-type li {
  display: flex;
  align-items: center;
  flex: 1;
}

.answer-type li i {
  display: inline-block;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 1rpx solid #f1f1f1;
  margin-right: 4px;
}

.answer-type li span {
  font-size: 12px;
}

.answer-type li i.blue {
  background: #1890ff;
}

.answer-type li i.green {
  background: #5fd0af;
}

.answer-type li i.red {
  background: #ff605d;
}

li {
  list-style: none;
}

.left-part {
  flex: 1;
}

// 试题的题型样式
.tag {
  background-color: #ddd;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 16px; // 与试题内容一致
  color: #fff;
}

.green-tag {
  background-color: #61d76d;
}

.blue-tag {
  background-color: #58bdfd;
}

.orange-tag {
  background-color: #ff6a2c;
}

.right {
  color: green;
}

.wrong {
  color: red;
}

.card-num {
  margin-left: 6px;
}
</style>
<style lang="scss">
.el-drawer__header {
  padding: 10px;
  padding-bottom: 0;
  margin: 0;
}

.el-drawer__body {
  padding: 0 10px;
}
</style>
